<template>
    <div>
        <div class="searchbar">

            <el-row class="pt20">
                <el-col :span="12">
                    <el-button size="mini" @click="init()">刷新</el-button>
                    <pers-button icon="el-icon-edit" size="mini" @click="add()" perms="member:user:add" type="primary"
                                 label="添加"></pers-button>
                    <pers-button type="danger" size="mini" icon="el-icon-delete" @click="delAll()" perms="member:user:del"
                                 label="批量删除"></pers-button>
                </el-col>
                <el-col :span="12" style="text-align: right;">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">

                        <el-form-item label="">
                            <el-input v-model="formInline.keyword" size="mini" placeholder="请输入关键字进行搜索"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" size="mini" @click="serach">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>

        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id"
                  :header-cell-style="{background:'#f9f9f9'}" stripe default-expand-all v-loading="loading"
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="id" label="ID" width="55"></el-table-column>
            <el-table-column prop="avatar" label="头像">
                <template slot-scope="scope">
                    <el-image :src="scope.row.avatar" fit="fill" style="width: 60px;height: 60px;"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="nickname" label="昵称"></el-table-column>
            <!--<el-table-column prop="address" label="学校地址"></el-table-column>-->

            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949"
                               @change="changeSwitch(scope.row)" :active-value="0" :inactive-value="1"></el-switch>
                </template>

            </el-table-column>
            <el-table-column prop="phone" label="联系电话"></el-table-column>


            <el-table-column prop="create_time" label="创建时间"></el-table-column>
            <el-table-column prop="user_id" label="操作">
                <template slot-scope="scope">
                    <PersButton type="text" size="mini" label="编辑" icon="fa  fa-pencil" perms="member:user:edit"
                                @click="edit(scope.row)"></PersButton>
                    <PersButton type="text" size="mini" icon="el-icon-delete" perms="member:user:del" label="删除"
                                @click="del(scope.row)"></PersButton>
                </template>
            </el-table-column>
        </el-table>

        <div class="block">

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog v-dialogDrag :visible.sync="open" width="800" append-to-body
                   :title="!form.user_id ? '新增用户' : '修改用户'">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="form.name" placeholder="请输入姓名" size="small"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="家庭地址" prop="address">
                            <el-input v-model="form.address" placeholder="请输入家庭地址"
                                      size="small"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="电话" prop="phone">
                            <el-input v-model="form.phone" placeholder="请输入电话" size="small"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否启用" prop="status">
                            <el-radio-group v-model="form.status">
                                <el-radio :label="0">启用</el-radio>
                                <el-radio :label="1">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="显示排序" prop="order_by">
                            <el-input-number v-model="form.order_by" controls-position="right" :min="0" :value="100"
                                             size="small"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="open = false" size="small">取 消</el-button>
                <el-button type="primary" @click="!form.user_id ? submitForm('form') : subEditForm('form') "
                           size="small">确定
                </el-button>
            </div>

        </el-dialog>

    </div>
</template>

<script>
    let _self;
    import PersButton from '@/components/PersButton';
    import {
        getUserList,
        addUser,
        editUser,
        delUser,
        changeStatus
    } from '@/api/user/user';

    export default {
        components: {
            PersButton,
        },
        data() {
            return {
                loading: false,
                pageSize: 10, //一页显示多少条
                pageNumber: 1,
                total: 0, //总页数
                tableData: [],
                serachword: '',
                formInline: {},
                open: false,
                form: {
                    "user_id": '',
                    "name": "",
                    "status": 1,
                    "order_by": 100,
                    "address": '',
                    "phone": '',
                },
                rules: {
                    name: [{
                        required: true,
                        message: "姓名不能为空",
                        trigger: "blur"
                    }, {
                        min: 2,
                        message: '至少2个字符',
                        trigger: 'blur'
                    }],
                    phone: [{
                        required: true,
                        message: "电话不能为空",
                        trigger: "blur"
                    }, {
                        min: 11,
                        message: '至少11个字符',
                        trigger: 'blur'
                    }],
                    address: [{
                        required: true,
                        message: "家庭地址不能为空",
                        trigger: "blur"
                    }],
                    status: [{
                        required: true,
                        message: "请选择是否启用",
                        trigger: "blur"
                    }],
                },
                multipleSelection: [],
                clickType: false,
            }
        },
        created() {
            _self = this;
            _self.init();
        },
        methods: {
            init: function () {
                _self.loading = true;
                let param = {
                    "pageSize": _self.pageSize,
                    "pageNumber": _self.pageNumber,
                    "_keywords": _self.serachword
                }
                getUserList(param).then((res) => {
                    console.log(res,111);
                    if (res.code == 200) {
                        _self.tableData = res.data.list;
                        _self.total = res.data.total;
                        _self.loading = false;
                    }
                })


            },
            serach: function () {
                _self.serachword = _self.formInline.keyword;
                _self.init();
            },
            handleSizeChange: function (e) {
                console.log(e);
                _self.pageSize = e;
                _self.init();
            },
            handleCurrentChange: function (e) {
                console.log(e);
                _self.pageNumber = e;
                _self.init();
            },
            handleSelectionChange: function (e) {
                console.log(e);
                let selectChang = []
                for (let item of e) {
                    console.log(item.id,22);
                    selectChang.push(item.id)

                }
                _self.multipleSelection = selectChang;
                console.log(selectChang,111);
            },
            delAll:function(){
                var data=_self.multipleSelection
                if (data.length === 0) {
                    _self.msgError('请选择一行');
                    return
                }
                _self.$confirm('确定删除此数据吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    delUser(data).then((res) => {
                        if (res.code == 200) {
                            _self.msgSuccess(res.msg);
                            _self.init();
                        } else {
                            _self.msgError(res.msg);
                        }
                    })


                }).catch(() => {
                    _self.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            add: function () {
                _self.form = {
                    "user_id": '',
                    "name": "",
                    "status": 1,
                    "order_by": 100,
                    // "nickanme": "",
                    // "avatar": 1,
                    "address": '',
                    "phone": '',
                };
                _self.open = true;
            },


            submitForm: function (data) {
                console.log(_self.form);

                _self.$refs[data].validate((valid) => {
                    if (valid) {
                        addUser(_self.form).then((res) => {
                            console.log(res)
                            if (res.code == 200) {
                                _self.msgSuccess(res.msg);
                                _self.init();
                                _self.open = false;
                            } else {
                                _self.msgError(res.msg);
                            }
                        })
                    } else {
                        return false;
                    }
                })
            },
            del: function (data) {
                _self.$confirm('确定删除此数据吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
console.log(241234)
                    delUser(data.id).then((res) => {
                        if (res.code == 200) {
                            _self.msgSuccess(res.msg);
                            _self.init();
                        } else {
                            _self.msgError(res.msg);
                        }
                    })


                }).catch(() => {
                    _self.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            edit: function (data) {
                _self.form.user_id = data.id;
                let editForm = {
                    "id": data.id,
                    "name": data.name,
                    "address": data.address,
                    "status": data.status,
                    "order_by": data.order_by,
                    "phone": data.phone,
                }
                Object.assign(_self.form, editForm);
                _self.open = true;
            },
            subEditForm: function (data) {
                _self.$refs[data].validate((valid) => {
                    if (valid) {
                        editUser(_self.form).then((res) => {
                            if (res.code == 200) {
                                _self.msgSuccess(res.msg);
                                _self.init();
                                _self.open = false;

                            } else {
                                _self.msgError(res.msg);
                            }
                        })
                    } else {
                        return false;
                    }
                })

            },
            changeSwitch:function(data){
                changeStatus(data.id).then((res)=>{

                    if(res.code==200){
                        _self.msgSuccess(res.msg);
                        _self.init();
                    }else{
                        _self.msgError(res.msg);
                    }
                })
            },
            cleanDiaglog: function (shows) {

                _self.clickType = false;
            },
            openUploadDial: function () {

                _self.clickType = true;
            }
        }
    }
</script>

<style lang="scss">
    @import "@/assets/css/common.scss";

    .demo-form-inline {
        .el-form-item {
            margin-bottom: 0;
        }
    }

    .el-tree {
        max-height: 200px;
        overflow: auto;
        background: #f7f7f7;
    }

    .el-tree-node__label,
    .el-textarea__inner {
        font-size: 12px;
    }

    .groupmenu .el-tree-node__children .el-tree-node__children .el-tree-node__children .el-tree-node__content {
        float: left;
        width: 100px;
    }

    .el-checkbox__label {
        font-size: 12px !important;
    }

    .uploadcol {
        display: flex;
        flex-flow: column;
        width: 100px;
    }

    .uploadborder {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        /* cursor: pointer;
            position: relative;
            overflow: hidden; */
        width: 100px;
        height: 100px;
    }
</style>
